<template>
  <div class="container-detail">
    <el-drawer
      :size="'50%'"
      :before-close="handleClose"
      v-model="props.showUnitdetail"
    >
      <template #header="{ close, titleId, titleClass }">
        <h4 :id="titleId">
       <span> {{ unitForm.screeningPersonnelName }} </span>
         <el-tag type="warning" style="margin-left:30px;">{{ unitForm.personnelTypeName }}</el-tag>
         <el-tag v-if="unitForm.personnelType === 1" type="primary" style="margin-left:10px;">{{ unitForm.controlTypeeName }}</el-tag>
         </h4>
       
      </template>
      <div class="middle-top">
        <div class="middle-top">
          <div class="middle-title">
            <img src="@/assets/images/title-icon.png" alt="" />
            人员信息
          </div>
        </div>
        <div>
          <el-descriptions
            border
            style="margin: 20px 0"
            label-align="center"
            align="center"
            :column="2"
            class="limited-width"
          >
          <el-descriptions-item
              label="身份证"
              label-class-name="desLabel"
              label-align="center"
              align="center"
            >
              <div class="des-content">
                {{ unitForm.identityCard }}
              </div>
            </el-descriptions-item>
           
            <el-descriptions-item
              label="联系方式"
              label-class-name="desLabel"
              class-name="desInfo"
              label-align="center"
              align="center"
            >
              <div class="des-content">
                {{ unitForm.phone }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item
              label="工作单位"
              label-class-name="desLabel"
              label-align="center"
              align="center"
            >
              <div class="des-content">
                {{ unitForm.workUnit }}
              </div></el-descriptions-item
            >
            <el-descriptions-item
              label="工作职业"
              label-class-name="desLabel"
              label-align="center"
              align="center"
            >
              <div class="des-content">
                {{ unitForm.jobOccupation }}
              </div></el-descriptions-item
            >
            <el-descriptions-item
              label="常住地派出所"
              label-class-name="desLabel"
              label-align="center"
              align="center"
            >
              <div class="des-content">
                {{ unitForm.policeName }}
              </div></el-descriptions-item
            >
            <el-descriptions-item
              label="户籍派出所"
              label-class-name="desLabel"
              label-align="center"
              align="center"
            >
              <div class="des-content">
                {{ unitForm.censusRegister }}
              </div></el-descriptions-item
            >
          
          </el-descriptions>
        </div>

        <div class="middle-top">
          <div class="middle-title">
            <img src="@/assets/images/title-icon.png" alt="" />
            无人机
          </div>
        </div>
        <div class="fly-title">
          当前持有 {{ unitForm?.personneUavInfoRespVos?.length }} 架无人机
      </div>
        <div class="info">
          <!-- 表格数据 -->
          <el-table
            :data="unitForm.personneUavInfoRespVos"
            border
            height="200px"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              label="无人机品牌"
              prop="droneBrand"
              :show-overflow-tooltip="true"
               width="140px"
            >
             
            </el-table-column>
            <el-table-column
              label="无人机型号"
              prop="uavModel"
              :show-overflow-tooltip="true" width="140px"
            >
              
            </el-table-column>

            <el-table-column
              label="无人机识别码"
              prop="droneIdentificationCode"
              :show-overflow-tooltip="true" width="120px"
            >
             
            </el-table-column>
            <el-table-column
              label="本人/单位使用"
              prop="useTypeName"
              :show-overflow-tooltip="true"
              width="150px"
            >
            
            </el-table-column>
            <el-table-column
              label="用途"
              prop="purpose"
              :show-overflow-tooltip="true"
              width="180"
            >
             
            </el-table-column>
            <el-table-column
              label="备注"
              prop="remark"
              :show-overflow-tooltip="true"
              min-width="180"
            >

            </el-table-column>
         
          </el-table>
        </div>
        <div class="middle-top" v-if="unitForm.personnelType === 1">
          <div class="middle-title">
            <img src="@/assets/images/title-icon.png" alt="" />
            管控情况
          </div>
        </div>
        <div v-if="unitForm.personnelType === 1">
          <el-descriptions
            border
            style="margin: 20px 0"
            label-align="center"
            align="center"
            :column="2"
            class="limited-width"
          >
            <el-descriptions-item
              label="上报时间"
              label-class-name="desLabel"
              class-name="desInfo"
              label-align="center"
              align="center"
              width="240px"
              :span="2"
            >
              <!-- <div class="des-content"> -->
                {{ unitForm.reportedTime  || '--'}}
              <!-- </div> -->
            </el-descriptions-item>
            <el-descriptions-item
              label="上报人"
              label-class-name="desLabel"
              class-name="desInfo"
              label-align="center"
              align="center"
             :span="2"
            >
              <!-- <div class="des-content"> -->
                {{ unitForm.reportedPeo || '--'}}
              <!-- </div> -->
            </el-descriptions-item>
            <el-descriptions-item
              label="上报单位"
              label-class-name="desLabel"
              label-align="center"
              align="center" :span="2"
            >
              <!-- <div class="des-content"> -->
                {{ unitForm.reportedUnit|| '--' }}
              <!-- </div> -->
            </el-descriptions-item>
            <el-descriptions-item
              label="管控情况"
              label-class-name="desLabel"
              label-align="center"
              align="center" :span="2"
            >
              <!-- <div class="des-content"> -->
                {{ unitForm.controlSituation|| '--' }}
              <!-- </div> -->
              </el-descriptions-item
            >
           
          </el-descriptions>
        </div>
        
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  getPepleInfoApi,
} from "@/api/erp/unit";
const emit = defineEmits(["refreshList"]);

const props = defineProps({
  showUnitdetail: {
    type: Boolean,
    default: false,
  },
});

// 表格加载效果
const loading = ref(false);

const unitForm = ref({});

//处理编辑
const handleDetailInfo = async (row) => {
  console.log("row", row);
  const res = await getPepleInfoApi(row.screeningPersonnelId);
  console.log("详情信息》》》》》》》》");
  console.log(res);
  row.personneUavInfoRespVos = [];
  unitForm.value = {
    ...res.data,
    personneUavInfoRespVos: res.data.personneUavInfoRespVos || [],
  };
};



const handleClose = () => {
  emit("update:showUnitdetail", false);
};

defineExpose({
  handleDetailInfo,
});
</script>

<style scoped lang="scss">
.container-detail {
  .info {
    padding: 20px 0;
  }
  .des-content {
    width: 300px;
    // overflow: hidden;
  }
  :deep(.el-drawer__header) {
    color: #000;
    border-bottom: 1px solid #d7d7d7;
  }

  :deep(.el-drawer__body) {
    padding-top: 0;
  }
  .container-detail-top {
    display: flex;
    .top-left {
      width: 70%;
      .top-left-content {
        margin-top: 15px;
        .address {
          display: flex;
          font-size: 14px;
          color: #666666;
          .item {
            display: flex;
            margin-right: 50px;
          }
        }
        .limited-width {
          :deep(.el-descriptions__label) {
            width: 130px !important;
          }
        }
        .selectstyle {
          margin: auto;
          :deep(.el-icon svg) {
            width: 0;
            height: 0;

            border-top-color: #6f6f6f;
            transform: translateY(4px);
          }
          :deep(.el-input__wrapper) {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
          }
          :deep(.el-input__wrapper.is-focus) {
            box-shadow: none !important;
          }
          :deep(.el-select .el-input__wrapper.is-focus) {
            box-shadow: none !important;
          }
          :deep(.el-select .el-input.is-focus .el-input__wrapper) {
            box-shadow: none !important;
          }
          :deep(.el-input.is-disabled .el-input__inner) {
            -webkit-text-fill-color: #303133;
          }
        }
      }
    }
    .top-right {
      background: linear-gradient(-19deg, #00deff, #0096ff);
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      width: 30%;
      margin-left: 20px;
      padding: 10px 30px 20px 30px;
      .card-title {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        border-bottom: 1px solid #f6f6f6;
        .text {
          margin-left: 10px;
          font-size: 16px;
          color: #ffffff;
        }
        .operate {
          cursor: pointer;
          font-size: 12px;
          color: #ffffff;
        }
        .operate-explain {
          position: absolute;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          top: 8px;
          right: 68px;
          z-index: 10;
          background-color: #fff;
          padding: 10px 20px 20px 20px;
          box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.3);
          border-radius: 5px;
          .contenttext-close {
            color: #4d88fd;
            text-align: right;
            cursor: pointer;
          }
          .item {
            font-size: 12px;
            color: #7f7f7f;
          }
        }
      }
      .top-right-content {
        height: calc(100% - 31px);
        display: flex;
        margin-top: 10px;
        .content-left {
          width: 174px;
          background: url("@/assets/images/security.png") no-repeat;
          .index {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 50px;
            .num {
              font-size: 20px;
              color: #ffffff;
            }
            .text {
              font-size: 12px;
              color: #ffffff;
            }
          }
        }
        .content-right {
          width: 255px;
          padding: 25px 10px 10px;
          .right-message {
            padding: 0 20px;
            .right-title {
              font-size: 14px;
              color: #ffffff;
            }
            .right-content {
              font-size: 14px;
              color: #ffffff;
              text-indent: 2em;
              margin-top: 20px;
            }
          }
          .right-item {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            .item {
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #ffffff;
              .item-content {
                margin-left: 10px;
                .content-num {
                  font-size: 20px;
                }
              }
            }
          }
        }
      }
    }
  }
  .container-detail-bottom {
    margin-top: 20px;
    .checktable {
      margin-top: 20px;
    }
  }
}
.fly-title {
  background-color: #FFF0DD;
  height: 40px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color:#EE574A;
}
</style>
